<!DOCTYPE html>
<html lang="cn">
<head>
    <meta charset="utf-8">
    <title>jQuery验证</title>
    <link rel="stylesheet" href="../css/screen.css">
    <style>
        #commentForm {
            width: 500px;
        }

        #commentForm label {
            width: 250px;
        }

        #commentForm label.error, #commentForm input.submit {
            margin-left: 253px;
        }

        #signupForm {
            width: 670px;
        }

        #signupForm label.error {
            margin-left: 10px;
            width: auto;
            display: inline;
        }

        #newsletter_topics label.error {
            display: none;
            margin-left: 103px;
        }
    </style>
</head>
<body>
<h1 id="banner">点击<a href="https://jqueryvalidation.org/">jQuery Validation Plugin</a>查看更多官网例子</h1>
<div id="main">
    <form class="cmxform" id="commentForm" method="post" action="user/commentInfo">
        <fieldset>
            <legend>请填写以下信息</legend>
            <p>
                <label><span style="color: red">*</span>姓名(至少两个字符)</label>
                <input id="cname" name="name" minlength="2" type="text" required>
            </p>
            <p>
                <label><span style="color: red">*</span>邮箱</label>
                <input id="cemail" type="email" name="email" required>
            </p>
            <p>
                <label>主页URL</label>
                <input id="curl" type="url" name="url">
            </p>
            <p>
                <label><span style="color: red">*</span>你的意见</label>
                <textarea id="ccomment" name="comment" required></textarea>
            </p>
            <p>
                <input class="submit" type="submit" value="提交">
            </p>
        </fieldset>
    </form>
    <form class="cmxform" id="signupForm" method="get" action="user/userInfo">
        <fieldset>
            <legend>验证完整表单信息</legend>
            <p>
                <label>姓</label>
                <input id="firstname" name="firstname" type="text">
            </p>
            <p>
                <label>名</label>
                <input id="lastname" name="lastname" type="text">
            </p>
            <p>
                <label>姓名</label>
                <input id="username" name="username" type="text">
            </p>
            <p>
                <label>密码</label>
                <input id="password" name="password" type="password">
            </p>
            <p>
                <label>确认密码</label>
                <input id="confirm_password" name="confirm_password" type="password">
            </p>
            <p>
                <label>邮箱</label>
                <input id="email" name="email" type="email">
            </p>
            <p>
                <label>同意协议</label>
                <input type="checkbox" class="checkbox" id="agree" name="agree">
            </p>
            <p>
                <label>接收新闻推送</label>
                <input type="checkbox" class="checkbox" id="newsletter" name="newsletter">
            </p>
            <fieldset id="newsletter_topics">
                <legend id="topic">主题 (至少选择两项)</legend>
                <label>
                    <input type="checkbox" id="topic_marketflash" value="marketflash" name="topic">Marketflash
                </label>
                <label>
                    <input type="checkbox" id="topic_fuzz" value="fuzz" name="topic">Latest fuzz
                </label>
                <label for="topic_digester">
                    <input type="checkbox" id="topic_digester" value="digester" name="topic">Mailing list digester
                </label>
                <label for="topic" class="error"></label>
            </fieldset>
            <p>
                <input class="submit" type="submit" value="提交">
            </p>
        </fieldset>
    </form>
</div>
</body>
<script src="jquery-3.0.0.js"></script>
<script src="jquery.validate.js"></script>
<script type="text/javascript">

    $("#commentForm").validate({
        submitHandler: function (form) {
            console.log($(form).serialize());
            form.submit();
        }
    });

    $("#signupForm").validate({
        rules: {
            firstname: "required",
            lastname: "required",
            username: {
                required: true,
                minlength: 2
            },
            password: {
                required: true,
                minlength: 5
            },
            confirm_password: {
                required: true,
                minlength: 5,
                equalTo: "#password"
            },
            email: {
                required: true,
                email: true
            },
            topic: {
                required: "#newsletter:checked",
                minlength: 2
            },
            agree: "required"
        },
        messages: {
            firstname: "请输入姓",
            lastname: "请输入名",
            username: {
                required: "请输入姓名",
                minlength: "至少两个字符"
            },
            password: {
                required: "请输入密码",
                minlength: "至少5个字符"
            },
            confirm_password: {
                required: "确认密码",
                minlength: "至少5个字符",
                equalTo: "密码不一致"
            },
            email: "请输入邮箱",
            agree: "请勾选同意协议",
            topic: "请至少选择两个主题"
        },
        submitHandler: function (form) {
            console.log($(form).serialize());
            form.submit();
        }
    });

    $("#username").focus(function () {
        var firstname = $("#firstname").val();
        var lastname = $("#lastname").val();
        if (firstname && lastname && !this.value) {
            this.value = firstname + "." + lastname;
        }
    });

    //code to hide topic selection, disable for demo
    var newsletter = $("#newsletter");
    // newsletter topics are optional, hide at first
    var inital = newsletter.is(":checked");
    var topics = $("#newsletter_topics")[inital ? "removeClass" : "addClass"]("gray");
    var topicInputs = topics.find("input").attr("disabled", !inital);
    // show when newsletter is checked
    newsletter.click(function () {
        topics[this.checked ? "removeClass" : "addClass"]("gray");
        topicInputs.attr("disabled", !this.checked);
    });
</script>
</html>
